<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import {
  getOrderList,
  getOrderCount,
  sendExpress,
  cancelOrder,
  pickOrder,
  completePsOlder
} from '@/api/MallManage/order.js'
import LogistcsInfo from '@/views/WholesaleManagement/TransactionManagement/OrderManagement/Components/LogistcsInfo.vue'
import getRules from "@/validUtils";
import kuaidi from './JSON/kuaidi.js';
import CancelOrderDialog from './Components/CancelOrderDialog.vue'


const loading = ref(false)
const logistcsRef = ref(null);
const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();

// 新增编辑回退时候刷新列表
onActivated(()=>{

})
const formInline = ref([

    {
      type: "input",
      prop: "phone",
      placeholder: "顾客手机",
      label: "",
      model: "",
    },
    {
      type: "input",
      prop: "orderNo",
      placeholder: "订单编号",
      label: "",
      model: "",
    },
    {
      type: "input",
      prop: "goodsName",
      placeholder: "商品名称",
      label: "",
      model: "",
    },
    {
      type: "input",
      prop: "referrer",
      placeholder: "办理人",
      label: "",
      model: "",
    },
    {
      type: "datePicker",
      prop: ["beginDate", "endDate"],
      startPlaceholder: "下单开始时间",
      endPlaceholder: "下单结束时间",
      format:"YYYY-MM-DD",
      label: "",
      model: [],
    },
    {
      type: "select",
      placeholder: "订单类型",
      label: '',
      filterable:true,
      prop: 'pickType',
      data:[{
        label:'外卖配送',
        value:1
      },{
        label:'用户自提',
        value:2
      },{
        label:'快递配送',
        value:3
      }],
      model: "",
    },
])

const totalPage = ref(0)
const tableData = ref([]);
const tableLoading = ref(false);

const handlerSearch = async (formInline)=>{
    tableLoading.value = true;
    try{
        let data = {
            ...formInline,
            storeId:"1739114669098393602",
            orderStatus:orderCheckStatus.value == -1?"":orderCheckStatus.value
        }
        let result = await getOrderList(data);

        totalPage.value = Number(result.total);

        tableData.value = result.records.map((value)=>{
            let goodInfoList = [];
            if(value.goods && value.goods.goodsList){
                value.goods.goodsList.forEach(lis=>{
                    goodInfoList.push({
                        ...lis,
                        orderAmount:value.goods.orderAmount,
                        productsAmount:value.goods.productsAmount,
                        expressAmount:value.goods.expressAmount,
                        offers:value.goods.offers,
                        payAmount:value.goods.payAmount,
                        chargeAmount:value.goods.chargeAmount,
                        expectAmount:value.goods.expectAmount,
                    })
                })
            }
            let orderStatusName = "";
            typeOfCode.value.forEach(i=>{
                if(i.code == value.orderStatus){
                    if(value.orderStatus === 5){
                        orderStatusName = value.merchantCancelReason ? '已退款（商家取消订单）' :'已退款（用户取消订单）'
                    }else{
                        orderStatusName = i.name
                    }
                    if (value.orderStatus === 14 && value.userDetail.delivery === 3){
                      orderStatusName = '商家配送中'
                    }
                }
            })
            expressData.value.forEach(i=>{
                if(value.userDetail.expressCom == i.expressCompanyCode){
                    value.userDetail.expressCom = i.expressCompanyName
                }
            })
            return {
                ...value,
                isOpen:false,
                goodInfoList,
                orderStatusName
            }
        })
        instance.proxy.$forceUpdate();
        tableLoading.value = false;
    }catch(e){
        console.log(e);
        tableLoading.value = false;
    }
}
const sendOutGoods = (uuid)=>{

}
const lookLogistcs = (info)=>{
    logistcsRef.value.open(info.orderId);
}

const showCancelOrderDialog = ref(false)
const orderDetail = ref({});
const cancelOrderHandle = (item)=>{
    showCancelOrderDialog.value = true;
    orderDetail.value = item;
}
const refresh = ()=>{
    seachTable.value && seachTable.value.handlerSearch();
}
const takeFlag = ref(false);
const takeForm = ref({
    takeNumber:"",
    orderId:""
});
const takeNumberRef = ref(null)
const liftComplete = (item)=>{
    takeFlag.value = true;
    takeForm.value = {
        takeNumber:"",
        orderId:item.orderId,
        pickCode:item.userDetail && item.userDetail.pickCode?item.userDetail.pickCode:""
    }
    setTimeout(()=>{
        $("#takeNumberRef")[0].focus();
    },0)
}
const inputTakeNumber = async ()=>{
    if((takeForm.value.pickCode??'') === ''){
        ElMessage({
            type: 'error',
            message:"订单自提码异常"
        });
        return;
    }
    if(takeForm.value.pickCode != takeForm.value.takeNumber){
        takeForm.value.takeNumber = "";
        ElMessage({
            type: 'error',
            message:"自提码错误，请重新输入或重新扫描！"
        });
        return;
    }
    try {
        let data = {
            orderId:takeForm.value.orderId
        }
        await pickOrder(data)
        takeFlag.value = false;
        ElMessage({
            type: 'success',
            message:"操作成功"
        });
        seachTable.value.handlerSearch();
    } catch (error) {

    }finally{

    }
}
const refoundFormRef = ref(null);
const refoundFlag = ref(false);
const refoundForm = ref({
    refoundReason:"",
    orderId:""
})
const confrimRefound = ()=>{
    refoundFormRef.value.validate(async (valid, fields,msg)=>{
        if(valid){
            try {
                loading.value = true;
                let data = {
                    orderId:refoundForm.value.orderId,
                    cancelMsg:refoundForm.value.refoundReason,
                    flag:true
                }
                const res = await cancelOrder(data);
                const state = res.indexOf('失败') > -1 ? 'error':'success'
                ElMessage({
                    type: state,
                    message: res
                });
                refoundFlag.value = false;
                seachTable.value.handlerSearch();
                loading.value = false
            } catch (error) {
                console.log(error);
            }
        }
    })
}
const refoundOrder = (item)=>{
    refoundFlag.value = true;
    refoundForm.value = {
        refoundReason:"",
        orderId:item.orderId
    }
}
const expressData = ref(kuaidi);
const sendFlag = ref(false);
const sendFormRef = ref(null);
const sendForm = ref({
    expressCompanyCode:"",
    expressCode:"",
    orderId:"",
    userDetail:"",
    goodInfoList:[]
})
const confrimSend = ()=>{
    sendFormRef.value.validate(async (valid, fields,msg)=>{
        if(valid){
            let data = {
                orderId:sendForm.value.orderId,
                expressNum:sendForm.value.expressCode,
                expressCom:sendForm.value.expressCompanyCode,
                expressName:""
            }
            expressData.value.forEach(i=>{
                if(data.expressCom == i.expressCompanyCode){
                    data.expressName = i.expressCompanyName
                }
            })
            btnLoading.value = true;
            try{
                await sendExpress(data)
                ElMessage.success('发货成功');
                seachTable.value.handlerSearch();
                btnLoading.value = false;
                sendFlag.value = false;
            }catch(e){
                btnLoading.value = false;
            }
        }
    })
}
const openSend = (item)=>{
    sendForm.value = {
        expressCompanyCode:"yunda",
        expressCode:"",
        orderId:item.orderId,
        goodInfoList:item.goodInfoList,
        userDetail:item.userDetail
    }
    sendFlag.value = true;
}
const orderStatus = ref([
    {
        value:-1,
        name:"全部订单",
        num:0
    },
    {
        value:21,
        name:"待提取",
        num:0
    },
    {
        value:41,
        name:"待发货",
        num:0
    },
    {
        value:44,
        name:"待收货",
        num:0
    },
    {
        value:15,
        name:"已送达",
        num:0
    },
    {
        value:3,
        name:"已完成",
        num:0
    },
    {
        value:4,
        name:"订单退款/取消",
        num:0
    },

])
let typeOfCode = ref([
  {"code": 0, "name": "待付款"},
  {"code": 3, "name": "已完成"},
  {"code": 4, "name": "已取消"},
  {"code": 5, "name": "已退款"},
  {"code": 11, "name": "等待骑手接单"},
  {"code": 12, "name": "骑手取货中"},
  {"code": 13, "name": "骑手到店"},
  {"code": 14, "name": "配送中"},
  {"code": 15, "name": "已送达"},
  {"code": 17, "name": "订单配送异常"},
  {"code": 21, "name": "待提取"},
  {"code": 41, "name": "待发货"},
  {"code": 42, "name": "运输中"},
  {"code": 43, "name": "已送达"},
  {"code": 44, "name": "待收货"}
])
const _getOrderCount = async ()=>{
    try{
        let result = await getOrderCount({storeId:"1739114669098393602"});
        let orderStatusList = [];
        orderStatusList = result.map(lis=>{
            return {
                value:lis.orderStatus,
                num:Number(lis.orderCount),
                orderStatus:lis.orderStatus,
            }
        })
        let total = 0;
        let cancelOrRefound = 0;
        let harvestNum = 0;
        let waitNum = 0
        orderStatusList.forEach(lis=>{
            total = total + Number(lis.num);
            if(lis.orderStatus == 4 || lis.orderStatus == 5){
                cancelOrRefound = cancelOrRefound + Number(lis.num);
            }
            if(lis.orderStatus == 12 || lis.orderStatus == 13 || lis.orderStatus == 14 || lis.orderStatus == 42 || lis.orderStatus == 43){
                harvestNum = harvestNum + Number(lis.num);
            }
            if(lis.orderStatus == 11 || lis.orderStatus == 41){
                waitNum = waitNum + Number(lis.num);
            }
        })
        orderStatus.value.forEach(lis=>{
            if(lis.value == -1){
                lis.num = total;
            }else if(lis.value == 4){
                lis.num = cancelOrRefound;
            }else if(lis.value == 44){
                lis.num = harvestNum;
            }else if(lis.value == 41){
                lis.num = waitNum;
            }else{
                orderStatusList.forEach(i=>{
                    if(lis.value == i.value){
                        lis.num = i.num;
                    }
                })
            }

        })
    }catch(e){
        console.log(e);
    }
}
_getOrderCount();

//商家完成配送
const completeOlder = (row) => {
  completePsOlder({orderId: row.orderId}).then(()=>{
    ElMessage.success('配送完成');
    seachTable.value.handlerSearch();
  })
}

const objectSpanMethod = ({row,column,rowIndex,columnIndex})=>{

    if (rowIndex === 0) {
        if ([3, 4, 5, 6, 7, 8, 9].includes(columnIndex)) {
          return {
            rowspan: tableData.value.length,
            colspan: 1,
          };
        }
      } else {
        if ([3, 4, 5, 6, 7, 8, 9].includes(columnIndex)) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
    }

}
const addressHandle = (value)=>{
    if(!(value.userDetail && value.userDetail.address)){
        return '-'
    }
    let province = value.userDetail.province || '';
    let city = province?province == value.userDetail.city?'直辖市':value.userDetail.city:'';
    let district = value.userDetail.district || '';
    let address = value.userDetail.address || "";
    return [province,city,district,address].join('');
}
const orderCheckStatus = ref(-1);
const btnLoading = ref(false);
const changeOrderStatus = ()=>{
    _getOrderCount();
    seachTable.value.initSearch();
}
</script>
<template>
    <div class="page-contain" v-loading="loading">
        <div style="width:100%;height:10px"></div>
        <div class="btns-status"  >
            <el-radio-group v-model="orderCheckStatus" @change="changeOrderStatus">
                <el-radio-button :label="item.value" v-for="(item,index) in orderStatus" :key="index">{{ item.name }}({{ item.num }})</el-radio-button>
            </el-radio-group>
        </div>
        <div class="info-table" >
            <SeachTable
                :tableType="1"
                ref="seachTable"
                :forms="formInline"
                :tableData="tableData"
                :totalPage="totalPage"
                :showTable="false"
                :isOtherContent="true"
                @handlerSearch="handlerSearch"
            >
                <template #otherContent="{ tableDataInfo }">
                    <div style="width:100%;min-height:100%;" v-loading="tableLoading">
                        <div style="width:100%" v-if="tableDataInfo.length>0">
                            <div class="order-div" v-for="(item,index) in tableDataInfo" :key="index">
                                <div class="order-header">
                                    <div class="lis">订单编号：{{ item.orderNo }}</div>
                                    <div class="lis order-state">订单状态：{{ item.orderStatusName }}
                                      <img v-if="item.orderStatusName ==='商家配送中'" src="@/assets/images/warning-circle@2x.png"/>
                                    </div>
                                    <div class="lis">下单时间：{{ item.createTime }}</div>
                                    <div class="lis" v-if="item.payTime">支付时间：{{ item.payTime }}</div>
                                    <div class="lis">办理人：{{ item.referrer }}</div>
                                </div>

                                <el-table :data="item.isOpen?item.goodInfoList:item.goodInfoList.slice(0,1)" style="width: 100%" stripe  border :span-method="objectSpanMethod" :key="item.orderId">
                                    <el-table-column prop="phone" label="商品名称 (共2件商品)" min-width="320">
                                        <template #header>
                                            <img src="@/assets/images/r-jt.png" alt="" class="jt" :style="{transform: item.isOpen?'rotate(90deg)':'rotate(0deg)'}" @click="item.isOpen = !item.isOpen" v-if="item.goodInfoList.length>1">
                                            商品名称 (共{{ item.goodInfoList.length }}件商品)
                                        </template>
                                        <template #default="{ row }">
                                            <div class="project-info">
                                                <div class="img">
                                                    <el-image
                                                    :src="row.imageUrl"
                                                    :zoom-rate="1.2"
                                                    :preview-src-list="[row.imageUrl]"
                                                    :initial-index="4"
                                                    style="width:100%;height:100%"
                                                    />
                                                </div>
                                                <div class="name-info">
                                                    <div class="info-show" >
                                                        <el-tooltip placement="top">
                                                            <template #content>
                                                                <div class="tips-info">
                                                                {{ row.name }}
                                                                </div>
                                                            </template>
                                                            <span class="tip-show">
                                                                {{ row.name }}
                                                            </span>
                                                        </el-tooltip>
                                                    </div>
                                                    <div class="info-show" >
                                                        <el-tooltip placement="bottom">
                                                            <template #content>
                                                                <div class="tips-info">
                                                                    {{ row.specification }}{{ row.unit }}&nbsp;&nbsp;{{ row.manufacturers }}
                                                                </div>
                                                            </template>
                                                            <span class="tip-show" style="font-weight:400">
                                                                {{ row.specification }}{{ row.unit }}&nbsp;&nbsp;{{ row.manufacturers }}
                                                            </span>
                                                        </el-tooltip>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="singleAmount" label="单价(元)" width="88"/>

                                    <el-table-column prop="num" label="数量" width="100"/>
                                    <el-table-column prop="productsAmount" label="商品总价 (元)" width="186"/>
                                    <el-table-column prop="expressAmount" label="配送费 (元)" width="122"/>
                                    <el-table-column prop="offers" label="商家活动支出 (元)" width="214"/>
                                    <el-table-column prop="payAmount" label="小计(元)" width="188"/>
                                    <el-table-column prop="chargeAmount" label="支付手续费(元)" width="180"/>
                                    <el-table-column prop="expectAmount" label="本单预计收入(元)" width="204"/>
                                    <el-table-column label="操作" fixed="right" width="90">
                                        <template #default="scoped">
                                            <div style="width:100%;margin-bottom:4px" v-if="item.orderStatus == 41"><a href="javascript:;" @click="openSend(item)" >发货</a></div>
                                            <div style="width:100%;margin-bottom:4px" v-if="((item.orderStatus == 42 || item.orderStatus == 43 || item.orderStatus == 3) || (item.userDetail.expressNum && item.orderStatus == 5)) && (item.pickType == 3)"><a href="javascript:;" @click="lookLogistcs(item)">查看物流</a></div>
                                            <div style="width:100%;margin-bottom:4px" v-if="(item.orderStatus == 0 || item.orderStatus == 41 || item.orderStatus == 42 || [11,12,13,14].includes(item.orderStatus)) && (item.goods.payAmount>0)"><a href="javascript:;" @click="cancelOrderHandle(item)" >订单取消</a></div>
                                            <div style="width:100%;margin-bottom:4px" v-if="[43,21].includes(item.orderStatus) && (item.autoOrderFlag != 1) && (item.goods.payAmount>0)"><a href="javascript:;" @click="refoundOrder(item)" >订单退款</a></div>
                                            <div style="width:100%;margin-bottom:4px"><a href="javascript:;" @click="liftComplete(item)" v-if="item.orderStatus == 21">自提完成</a></div>
                                            <div style="width:100%;margin-bottom:4px;" v-if="item.orderStatus == 14 && item.userDetail.delivery === 3"><a href="javascript:;" @click="completeOlder(item)">配送完成</a></div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="order-footer">
                                    <template v-if="item.pickType === 1">
                                        <div class="lis">
                                            <div class="t-t">收件人信息：</div>
                                            <div class="t-p">{{item.userDetail.userName || '-'}}</div>
                                        </div>
                                        <div class="lis">
                                            <div class="t-t">联系方式：</div>
                                            <div class="t-p">{{ item.userDetail.phone || '-' }}</div>
                                        </div>
                                        <div class="lis">
                                            <div class="t-t">收货地址：</div>
                                            <div class="t-p">{{ addressHandle(item) }}</div>
                                        </div>
                                        <div class="lis">
                                            <div class="t-t">骑手信息：</div>
                                            <div class="t-p rider-msg">{{ `${item.userDetail.riderName} ${item.userDetail.riderPhone} ${item.orderStatusName}` }}
                                              <el-popover trigger="click" width="250">
                                                <template #reference>
                                                  <img src="@/assets/images/jt-down.png" alt="" />
                                                  <div style="margin-left: 10px">更多</div>
                                                </template>
                                                <template #default>
                                                  <div class="timeline-body">
                                                    <el-timeline>
                                                      <el-timeline-item
                                                          v-for="(e, index) in item.userDetail.psDetail"
                                                          :key="index"
                                                          :color="index===0?'#3480FF':'#e4e7ed'"
                                                          :timestamp="(item.userDetail.delivery === 3 && e.status == 14)?
                                                          '商家配送':typeOfCode.find(c=>{return c.code === e.status}).name"
                                                      >
                                                        {{ e.time }}
                                                      </el-timeline-item>
                                                    </el-timeline>
                                                  </div>
                                                </template>
                                              </el-popover>
                                            </div>
                                        </div>
                                        <div class="lis">
                                            <div class="t-t">配送物流：</div>
                                          <div class="t-p">{{ ['','蜂鸟','达达','商家配送'][item.userDetail.delivery]||'-'}}</div>
                                        </div>
                                        <div class="lis">
                                            <div class="t-t">备注信息：</div>
                                            <div class="t-p">{{ item.userDetail.note || '-' }}</div>
                                        </div>
                                    </template>
                                    <template v-else-if="item.pickType === 3">
                                        <div class="lis" v-if="item.userDetail ">
                                            <div class="t-t">收件人信息：</div>
                                            <div class="t-p">{{ item.userDetail.userName || '-' }}</div>
                                        </div>
                                        <div class="lis" v-if="item.userDetail">
                                            <div class="t-t">联系方式：</div>
                                            <div class="t-p">{{ item.userDetail.phone || '-' }}</div>
                                        </div>
                                        <div class="lis" v-if="item.userDetail">
                                            <div class="t-t">收货地址：</div>
                                            <div class="t-p">{{ addressHandle(item) }}</div>
                                        </div>
                                        <div class="lis" v-if="item.userDetail ">
                                            <div class="t-t">配送快递：</div>
                                            <div class="t-p">{{ item.userDetail.expressCom || '-' }}</div>
                                        </div>
                                        <div class="lis" v-if="item.userDetail ">
                                            <div class="t-t">快递编号：</div>
                                            <div class="t-p">{{ item.userDetail.expressNum || '-' }}</div>
                                        </div>
                                        <div class="lis" v-if="item.userDetail ">
                                            <div class="t-t">备注信息：</div>
                                            <div class="t-p">{{ item.userDetail.note || '-' }}</div>
                                        </div>
                                        <div class="lis" v-if="item.orderStatus == 5">
                                            <div class="t-t">退款时间：</div>
                                            <div class="t-p">{{ item.refundTime || '-' }}</div>
                                        </div>
                                        <div class="lis" v-if="item.orderStatus == 5">
                                            <div class="t-t">退款理由：</div>
                                            <div class="t-p" v-if="item.cancelReason" style="color:#FF2440">{{ item.cancelReason}}</div>
                                            <div v-else>-</div>
                                        </div>
                                        <div class="lis" v-if="item.userDetail.pickCode">
                                            <div class="t-t">自提码：</div>
                                            <div class="t-p">{{ item.userDetail.pickCode || '-' }}</div>
                                        </div>
                                        <div class="lis" v-if="item.userDetail.pickTime">
                                            <div class="t-t">自提时间：</div>
                                            <div class="t-p">{{ item.userDetail.pickTime || '-' }}</div>
                                        </div>
                                    </template>

                                    <template v-else>
                                        <div class="lis" v-if="item.userDetail.pickCode">
                                            <div class="t-t">自提码：</div>
                                            <div class="t-p">{{ item.userDetail.pickCode || '-' }}</div>
                                        </div>
                                        <div class="lis" v-if="item.userDetail">
                                            <div class="t-t">联系方式：</div>
                                            <div class="t-p">{{ item.userDetail.phone || '-' }}</div>
                                        </div>
                                        <div class="lis" v-if="item.userDetail.pickTime">
                                            <div class="t-t">自提时间：</div>
                                            <div class="t-p">{{ item.userDetail.pickTime || '-' }}</div>
                                        </div>
                                        <div class="lis" v-if="item.userDetail ">
                                            <div class="t-t">备注信息：</div>
                                            <div class="t-p">{{ item.userDetail.note || '-' }}</div>
                                        </div>
                                    </template>

                                </div>
                            </div>
                        </div>
                        <div class="empty-data" v-else>
                            <div class="empty-img">
                                <div class="text">暂无订单</div>
                            </div>
                        </div>

                    </div>
                </template>
            </SeachTable>
        </div>

        <LogistcsInfo ref="logistcsRef"></LogistcsInfo>
        <CancelOrderDialog v-model:show="showCancelOrderDialog" :detail="orderDetail" @success="refresh"></CancelOrderDialog>
        <el-dialog v-model="refoundFlag" title="提示" width="380px">
            <div style="width:100%;" v-if="refoundFlag">
                <el-form :model="refoundForm" label-width="0px" ref="refoundFormRef">
                    <el-form-item label="" prop="refoundReason" :rules="getRules('input', '退款理由')">
                        <el-input type="textarea" v-model="refoundForm.refoundReason" placeholder="请输入退款理由" style="width:100%" :rows="4"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="refoundFlag = false">取消</el-button>
                    <el-button type="primary" :loading="loading" @click="confrimRefound()">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="sendFlag" title="发货" width="600px">
            <div style="width:100%;max-height:500px;overflow:auto" v-if="sendFlag">
                <div class="summary-info">
                    <div class="lis">收货人：{{ sendForm.userDetail.userName || '-' }}  {{ sendForm.userDetail.phone || '-'  }}</div>
                    <div class="lis"> {{ sendForm.userDetail.address || '-'  }}</div>
                </div>
                <el-form :model="sendForm" label-width="80px" ref="sendFormRef" style="margin-top:10px">
                    <el-form-item label="物流公司" prop="expressCompanyCode" :rules="getRules('select', '物流公司')">
                        <el-select v-model="sendForm.expressCompanyCode" placeholder="请选择物流公司" filterable clearable v-selectClose style="width:260px">
                            <el-option :label="item.expressCompanyName" :value="item.expressCompanyCode" v-for="(item,index) in expressData" :key="index"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="快递单号" prop="expressCode" :rules="getRules('input', '快递单号')" clearable>
                        <el-input type="text" v-model="sendForm.expressCode" placeholder="请输入快递单号" style="width:260px" ></el-input>
                    </el-form-item>
                </el-form>
                <el-table :data="sendForm.goodInfoList" style="width: 100%" stripe  >
                    <el-table-column prop="name" label="商品名称"/>
                    <el-table-column prop="specification" label="规格"/>
                    <el-table-column prop="num" label="数量" width="70"/>
                </el-table>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="sendFlag = false">取消</el-button>
                    <el-button type="primary" @click="confrimSend()" :loading="btnLoading">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="takeFlag" title="自提码" width="300px">
            <div style="width:100%;overflow:auto" v-if="takeFlag">
                <el-input id="takeNumberRef" v-model="takeForm.takeNumber" clearable style="width:260px;margin-bottom:20px" placeholder="请输入自提码或扫描条码" @keydown.enter="inputTakeNumber"></el-input>
            </div>
        </el-dialog>
    </div>
</template>
<style lang="less" scoped>
.empty-data{
    width: 100%;
    padding-top:150px;
    display: flex;
    justify-content: center;
    align-items: center;
    .empty-img{
        width: 300px;
        height: 200px;
        background: url('@/assets/images/empty-table.png');
        background-size: 100% 100%;
        position: relative;
        .text{
            position: absolute;
            bottom:0;
            width: 100%;
            text-align: center;
            color: #666666;
            line-height: 14px;
            font-size: 14px;

        }
    }
}
.summary-info{
    width: 100%;
    background: #F5F9FF;
    box-sizing: border-box;
    height: 53px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .lis{
        color:#000000;
        font-weight: 400;
        font-size: 14px;
        margin-left: 10px;
    }
}
a{
    color:#3480FF;
    text-decoration: none;

}
a+a{
    margin-left: 10px;
}
:deep(.search-table .table .el-table th){
    background:#F9F9F9;
}
:deep(.order-div .el-table--enable-row-transition .el-table__body td.el-table__cell){
    background: #fff;
}
:deep(.info-table .search-table .table){
    overflow: auto;
}
.page-contain{
    width: 100%;
    height: 100%;
    .order-div{
        width: 100%;
        border:1px solid #E5E5E5;
        margin-bottom:16px;
        a{
            line-height:14px;

        }
        &:last-child{
            margin-bottom: 0px;
        }
        .jt{
            cursor: pointer;
            margin-right: 5px;
            width: 8px;
            height: 8px;
            position: relative;
            top:-1px;
        }
        .order-footer{
            width: 100%;
            background: #F9F9F9;
            box-sizing: border-box;
            padding:16px;
            padding-bottom:0px;
            border-top:1px solid #E5E5E5;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .lis{
                width:calc(100% / 3);
                display: flex;
                justify-items: flex-start;
                margin-bottom:16px;
                align-items: flex-start;

                .t-t{
                    color:#222222;
                    font-size: 14px;
                    font-weight: 400;
                    width: 90px;
                    text-align: right;
                    line-height: 16px;
                }
                .t-p{
                    color:#222222;
                    font-size: 14px;
                    font-weight: 400;
                    width: calc(100% - 90px);
                    box-sizing: border-box;
                    padding-right: 20px;
                    word-break: break-all;
                    word-wrap: break-word;
                    line-height: 16px;
                }
            }
        }
        .order-header{
            width: 100%;
            box-sizing: border-box;
            height: 46px;
            padding: 0 16px;
            align-items: center;
            background: #DDDDDD;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .lis{
                margin-right: 60px;
                color:#000000;
                font-size: 14px;
                font-weight: 400;

            }
          .order-state{
            display: flex;
            height:18px;
            line-height: 18px;
            min-width: 170px;
            img{
              width: 16px;
              height:16px;
              margin-left: 4px;
            }
          }
        }
    }
    :deep(.el-radio-button:first-child .el-radio-button__inner){
        border-left:1px solid #3480FF;
    }
    .btns-status{
        width: 100%;

        height: 32px;
        box-sizing: border-box;
        padding:0 12px;
    }
    .info-table{
        width: 100%;
        height: calc(100% - 42px);
    }
}
.rider-msg{
  display: flex;
  img{
    cursor:pointer  ;
    width: 16px;
    height: 16px;
    margin:0 0  0 5px;
  }
}
.timeline-body{
  width: 200px;
  margin-top: 20px;
  ul{
    padding-inline-start: 20px;
  }
}
.time-step{
    padding: 20px 0 0 0;
  :deep(.el-timeline){
    padding-inline-start: 0;
  }
}
.tips-info{
    max-width: 300px;
}
.info-show{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .tip-show{
        max-width: 100%;
        box-sizing:border-box;
        padding-right:4px;
        font-weight: bold;
        font-size: 14px;
        color: #222222;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .text-show{
        max-width: calc(100% - 14px);
        box-sizing:border-box;
        padding-right:4px;
        font-weight: 400;
        color: #222222;
        line-height: 18px;
        word-break: break-all;
        word-wrap: break-word;
    }
    .img{
        width: 14px;
        height: 14px;
        cursor: pointer;

    }
}
.a-link{
    color:#3480FF;
    font-size: 14px;
    cursor: pointer;
}
.project-info{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .img{
        width: 48px;
        height: 48px;

    }
    .name-info{
        width:calc(100% - 56px);
        box-sizing: border-box;
        padding-left:8px;
        .p1{
            width: 100%;
            color: #222222;
            font-weight: bold;
            line-height: 14px;
            font-size: 14px;
            height: 14px;
        }
        .p2{
            width: 100%;
            margin-top:8px;
            color: #666666;
            line-height: 14px;
            font-size: 14px;
            height: 14px;
        }
    }
}
</style>
